<template>
    <app-navigator defaultPath="normal/button" ref="navigator">
        <article class="app-home">
            <section class="app-header">
                <span @click="goHome">v3-components</span>
            </section>
            <section class="app-menu">
                <app-menu/>
            </section>
            <section class="app-content">
                <app-navigator-page/>
            </section>
        </article>
    </app-navigator>
</template>

<script lang="ts">

    import {AppNavigator} from "./components/navigator/app-navigator";
    import {AppNavigatorPage} from "./components/navigator/app-navigator-page";
    import AppMenu from "./components/app/app-menu.vue";
    import {defineComponent} from 'vue'

    export default defineComponent({
        name: "app",
        components: {
            AppMenu,
            AppNavigator,
            AppNavigatorPage,
        },
        methods: {
            goHome() {
                (this.$refs.navigator as any).$._refer.methods.go('home')
            },
        },
    })
</script>

<style lang="scss">

    $headSize: 60px;
    $menuSize: 300px;

    .app-home {
        .app-header {
            height: $headSize;
            position: fixed;
            top: 0;
            left: 0;
            right: 0;
            border-bottom: solid 1px #ccc;
            box-sizing: border-box;
            display: flex;
            align-items: center;
            justify-content: space-between;
            font-size: 20px;
            font-weight: bold;
            font-style: italic;
            padding: 0 40px;
            color: #42b983;
        }

        .app-menu {
            position: fixed;
            top: $headSize;
            left: 0;
            width: $menuSize;
            bottom: 0;
            overflow-y: auto;
            overflow-x: hidden;
            border-right: solid 1px #ccc;
        }

        .app-content {
            padding-top: $headSize+20px;
            padding-left: $menuSize+20px;
            box-sizing: border-box;
        }
    }
</style>